<template>
	<div class="assdetails">
		<div class="assdetop">
			<img src="img/arrowleft.png" @click="back()"/>
			<span>{{arrs[0].title}}</span>
		</div>
		<div class="assdecenter">
			<img :src="arrs[0].img" />
			<h3>{{arrs[0].title}}</h3>
			<p>{{arrs[0].type3}}</p>
			<h5>上传者：{{arrs[0].author}}</h5>
			<span class="focus"></span>
		</div>
		<div class="pro">
			<b></b>
			<h2></h2>
			<span>1/336</span>
		</div>
		<ul class="assdebottom">
			<li>
				<img src="img/debottom1.png" />
				<span>有用<sup>10万+</sup></span>
			</li>
			<li>
				<img src="img/debottom2.png" />
				<span>离线</span>
			</li>
			<li>
				<img src="img/debottom3.png" />
				<span>分享</span>
			</li>
			<li>
				<img src="img/debottom4.png" />
				<span>添加</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				arrs: []
			}
		},
		created() {
			this.arrs = this.$store.state.assnavList.filter((v) => {
				if (v.id === this.$route.params.id) {
					return v;
				}
			})
			console.log(this.arrs)
		},
		methods:{
			back(){
				this.$router.go(-1);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.assdetails {
		background-color: #ffffff;
		.assdetop {
			width: 100%;
			height: 45px;
			position: relative;

			img,span {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}

			img {
				left: 0.15rem;
			}

			span {
				font-size: 0.16rem;
				left: 50%;
				transform: translate(-50%, -50%);
				font-weight: bold;
			}
		}

		.assdecenter {
			border-bottom: 2px solid #f9f9f9;
			border-top: 2px solid #f9f9f9;
			width: 100%;
			//height: calc(100% - 1.5rem);
			text-align: center;

			img {
				//margin-top: 2rem;
				margin-top:55%;
			}

			h3 {
				font-size: 0.18rem;
			}

			p {
				font-size: 0.14rem;
				color: #9c9c9c;
				font-weight: bold;
				margin-top: 0.1rem;
			}
			h5{
				font-size: 0.14rem;
				color: #9c9c9c;
				margin-top: 0.25rem;
				margin-bottom:55%;
			}
		}

		.pro {
			height: 0.4rem;
			width: 100%;
			border-bottom: 2px solid #f8f8f8;

			b {
				display: block;
				float: left;
				width: 0.03rem;
				height: 0.03rem;
				border: 5px solid #EED3D7;
				background-color: #14b27b;
				border-radius: 50%;
				margin-top: 0.13rem;
				margin-left: 0.17rem;
			}

			h2 {
				width: 2.26rem;
				height: 0.02rem;
				background-color: #e8eceb;
				float: left;
				margin-top: 0.2rem;
			}

			span {
				display: block;
				float: right;
				width: 0.93rem;
				height: 0.2rem;
				border-left: 0.02rem solid #EEEEEE;
				font-size: 0.14rem;
				text-align: center;
				margin-top: 0.12rem;
			}
		}

		.assdebottom {
			width: 100%;
			height:0.65rem;

			li {
				width: 25%;
				height:0.65rem;
				line-height: 0.65rem;
				float: left;
				position: relative;

				img {
					position: absolute;
					left: 0.27rem;
					top: 0.2rem;
				}

				span {
					position: absolute;
					left: 0.5rem;
					top: 0rem;
					font-size: 0.14rem;
					color: #939393;

					sup {
						font-size: 0.1rem;
						position: absolute;
						left: 0.25rem;
						top: -0.08rem;
						display: block;
						width: 0.34rem;
						height: 0.3rem;
						background-color: #FFFFFF;
						z-index: 2;
					}
				}
			}

			li:last-child {
				background-color: #40cb92;

				span {
					color: #FFFFFF;
				}
			}
		}
	}
</style>
